<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>结伴 国庆节探索长隆 - 骡窝窝</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="copyright" content="Copyright (c) 2006-2019 Mafengwo."/>
    <meta name="format-detection" content="telephone=no,address=no"/>
    <meta name="referrer" content="always"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <link href="https://css.mafengwo.net/css/cv/mobile+css+head:mobile+css+ui^YVw^1550829726.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://css.mafengwo.net/mobile/css/together/together.css?1550829726" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        window.Env = {
            "CNZZID": 30081550,
            "IS_MOBILE": true,
            "tid": 2340583,
            "WWW_HOST": "www.mafengwo.cn",
            "IMG_HOST": "images.mafengwo.net",
            "W_HTTP": "https:\/\/w.mafengwo.cn",
            "P_HOST": "passport.mafengwo.cn",
            "P_HTTP": "https:\/\/passport.mafengwo.cn",
            "PAGELET_HTTP": "https:\/\/pagelet.mafengwo.cn",
            "JS_HOST": "js.mafengwo.net",
            "TONGJI_HOST": "tongji.mafengwo.cn",
            "UID": 0,
            "CSTK": "dce2498535141a2b16725f62768acf71_68ca5c6af573ccfedc131773b5f11385",
            "GOOGLE_MAP_KEY": "AIzaSyD-Su0x_rPy1xehlMBcMyTqWkU49Bk53nQ"
        };
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            var a;//判断报名标识
            var b;
            // 获取结伴id
            var params = getParams();
            // 根据结伴id获取游记对象
            $.get(baseUrl + "/togetherTrips/" + params.id, function (data) {
                $(".together").renderValues(data, {
                    getHref: getHref
                });
            });


            var user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {//如果没登录点击就跳登录界面
                $(".applyBtn").css("background-color", "orange");
                $(".collectionBtn").css("background-color", "orange");
                $(".applyBtn").click(function () {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '请登陆后再执行相关操作!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html"
                        }
                    });
                });
                $(".collectionBtn").click(function () {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: true,
                        content: '请登陆后再执行相关操作!',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html"
                        }
                    });
                });
            }

            //回显已报名该结伴的用户的头像
            $.get(baseUrl + "/togetherTrips/" + params.id + "/users", function (data) {
                var json = {list: data}
                $("#userHead").renderValues(json, {
                    getHref: getHref
                });
            });

            //回显已关注该结伴的用户的头像
            $.get(baseUrl + "/togetherTrips/" + params.id + "/usersCollections", function (data) {
                var json = {list: data}
                $("#userHeadCollection").renderValues(json, {
                    getHref: getHref
                });
            });

            if (user) {
                //回显报名情况
                $.get(baseUrl + "/togetherTrips/" + params.id + "/applys/" + user.id, function (data) {
                    //console.log(data);
                    if (data.success) {//如果是有关注的
                        $(".applyBtn").css("background-color", "gray");
                        $(".applyBtn").html("取消报名");
                        a = 0;

                    } else {
                        $(".applyBtn").css("background-color", "orange");
                        $(".applyBtn").html("马上报名");
                        a = 1;
                    }
                });


                //回显关注情况
                $.get(baseUrl + "/togetherTrips/" + params.id + "/collections/" + user.id, function (data) {
                    console.log(data);
                    if (data.success) {//如果是有关注的
                        $(".collectionBtn").css("background-color", "gray");
                        $(".collectionBtn").html("取消关注");
                        b = 0;

                    } else {
                        $(".collectionBtn").css("background-color", "orange");
                        $(".collectionBtn").html("关注");
                        b = 1;
                    }
                });

                $(".applyBtn").click(function () {//点击报名事件
                    if (a == 1) {
                        //插入报名情况,
                        $.ajax({
                            url: baseUrl + "/togetherTrips/" + params.id + "/applys" + "/" + user.id,
                            method: "POST",
                        });

                        //更新数据库的数据
                        var temp = $("#applyNum").html();
                        $("#applyNum").html(parseInt(temp) + 1);
                        var applyJson = {"id": params.id, "applyNum": parseInt($("#applyNum").html())};
                        $.ajax({
                            type: "PUT",
                            url: baseUrl+"/togetherTrips/"+params.id+"/applyNum",
                            data: applyJson,
                        });


                        $(".applyBtn").css("background-color", "gray");
                        $(".applyBtn").html("取消报名");
                        a = 0;
                        //查询出报名该结伴的用户
                        $.get(baseUrl + "/togetherTrips/" + params.id + "/users", function (data) {
                            var json = {list: data}
                            console.log(data);
                            $("#userHead").renderValues(json, {
                                getHref: getHref
                            });
                            //弹框
                            $(document).dialog({
                                type : 'confirm',
                                closeBtnShow: true,
                                content: '报名成功',
                                onClickConfirmBtn: function(){
                                   window.location.reload();
                                },
                                onClickCancelBtn : function(){

                                },
                                onClickCloseBtn  : function(){

                                }
                            });
                        });
                    } else {
                        console.log(a);
                        //删除报名情况
                        $.ajax({
                            url: baseUrl + "/togetherTrips/" + params.id + "/applys" + "/" + user.id,
                            method: "DELETE"
                        });
                        //报名数量减一
                        var temp = $("#applyNum").html();
                        $("#applyNum").html(parseInt(temp) - 1);
                        var applyJson = {"id": params.id, "applyNum": parseInt($("#applyNum").html())};
                        $.ajax({
                            type: "PUT",
                            url: baseUrl+"/togetherTrips/"+params.id+"/applyNum",
                            data: applyJson,
                        });
                        //样式改变
                        $(".applyBtn").css("background-color", "orange");
                        $(".applyBtn").html("马上报名");
                        a = 1;
                        //头像
                        $.get(baseUrl + "/togetherTrips/" + params.id + "/users", function (data) {
                            var json = {list: data}
                            $("#userHead").renderValues(json, {
                                getHref: getHref
                            });
                            //弹框
                            $(document).dialog({
                                type : 'confirm',
                                closeBtnShow: true,
                                content: '取消成功',
                                onClickConfirmBtn: function(){
                                    window.location.reload();
                                },
                                onClickCancelBtn : function(){

                                },
                                onClickCloseBtn  : function(){

                                }
                            });
                        });
                    }
                })

                //------------------关注相关的--------------
                $(".collectionBtn").click(function () {//点击事件
                    if (b == 1) {
                        //插入报名情况,
                        $.ajax({
                            url: baseUrl + "/togetherTrips/" + params.id + "/collections" + "/" + user.id,
                            method: "POST",
                        });

                        //更新数据库的数据
                        var temp = $("#collectionNum").html();
                        $("#collectionNum").html(parseInt(temp) + 1);
                        var applyJson = {"id": params.id, "collectionNum": parseInt($("#collectionNum").html())};
                        $.ajax({
                            type: "PUT",
                            url: baseUrl+"/togetherTrips/"+params.id+"/collectionNum",
                            data: applyJson,
                        });


                        $(".collectionBtn").css("background-color", "gray");
                        $(".collectionBtn").html("取消关注");
                        b = 0;
                        //
                        $.get(baseUrl + "/togetherTrips/" + params.id + "/users", function (data) {
                            var json = {list: data}
                            $("#userHeadCollection").renderValues(json, {
                                getHref: getHref
                            });
                            //弹框
                            $(document).dialog({
                                type : 'confirm',
                                closeBtnShow: true,
                                content: '关注成功',
                                onClickConfirmBtn: function(){
                                    window.location.reload();
                                },
                                onClickCancelBtn : function(){

                                },
                                onClickCloseBtn  : function(){

                                }
                            });
                        });
                    } else {
                        //删除报名情况
                        $.ajax({
                            url: baseUrl + "/togetherTrips/" + params.id + "/collections" + "/" + user.id,
                            method: "DELETE"
                        });

                        var temp = $("#collectionNum").html();
                        $("#collectionNum").html(parseInt(temp) - 1);
                        var applyJson = {"id": params.id, "collectionNum": parseInt($("#collectionNum").html())};
                        $.ajax({
                            type: "PUT",
                            url: baseUrl+"/togetherTrips/"+params.id+"/collectionNum",
                            data: applyJson,
                        });

                        $(".collectionBtn").css("background-color", "orange");
                        $(".collectionBtn").html("关注");
                        b = 1;
                        $.get(baseUrl + "/togetherTrips/" + params.id + "/users", function (data) {
                            var json = {list: data}
                            console.log(data);
                            $("#userHeadCollection").renderValues(json, {
                                getHref: getHref
                            });
                            //弹框
                            $(document).dialog({
                                type : 'confirm',
                                closeBtnShow: true,
                                content: '取消成功',
                                onClickConfirmBtn: function(){
                                    window.location.reload();
                                },
                                onClickCancelBtn : function(){

                                },
                                onClickCloseBtn  : function(){

                                }
                            });
                        });
                    }
                })
            }
        });
    </script>

</head>
<body>
<div id="pos38"></div>
<header class="head2home">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
    <span><i class="fa fa-chevron-left"></i></span>
    </a>

    <div class="rBtn">
        <a href="/" class="home">官网首页</a>
    </div>
</header>

<section class="container">
    <div class="together">
        <div class="detail-head">
            <img width="100%" src="upload/xxxx.png">
            <div class="cover-info">
                <div class="va-wrap">
                    <div class="va-middle">
                        <h3 class="text-shadow" render-html="title">这是标题</h3>
                        <div class="user">
                        <span class="avatar"><a render-key="author.id" render-fun="getHref"
                                                data-url="/userProfiles.html?id="><img
                                render-src="author.headImgUrl"></a></span>
                            <span class="name" render-html="author.nickName">昵称</span>
                            <span class="level">Lv.32</span>
                            <span class="gender female"></span><br>
                            <span class="time" render-html="releaseTime">发布时间</span>
                        </div>
                    </div>
                    <ul class="nums va-middle text-shadow">
                        <li>关注<em class="_j_care_count" render-html="collectionNum" id="collectionNum">7</em></li>
                        <li>报名<em render-html="applyNum" id="applyNum">11</em></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <fieldset>
                <legend>出行信息</legend>
                <div class="d-flex">
                    <div class="p-2  flex-fill">
                        <i class="fa fa-calendar"></i> 出发时间 <span render-html="goTime"></span>
                    </div>
                    <div class="p-2  flex-fill"><i class="fa fa-money"></i> 消费等级
                        <span render-html="consumeName"></span></div>
                </div>
                <div class="d-flex">
                    <div class="p-2  flex-fill">
                        <i class="fa fa-user-circle"></i> 旅游人数
                        <span render-html="person"></span>
                    </div>
                    <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                        <span render-html="days"></span>
                    </div>
                </div>
            </fieldset>

            <!--<div class="content" render-html="content.content">

            </div>-->
        </div>
        <div class="detail-info" render-html="content.content">
            <!--开启广州长隆自驾游之旅<br/>
            1. 2019年国庆期间，13天自驾游，行程经典南岛路线环岛游。<br/>
            2. 第一次去长隆，现有女生2位，虽然都有驾照，但不是老司机不敢上路开车。<br/>
            3. 诚邀2位有驾照的朋友一同分担开车任务，男女都可，只望个性随和，可靠，健谈更佳。<br/>
            5. 小小上班族，希望合理安排预算。<br/>
            6. 园票已出。<br/>
            7. 以前有结伴台湾、斯里兰卡、首尔。<br/>
            8. 或者有已经规划好的小团队求捡。
            <br>-->
        </div>
        <div class="btn-block">
            <a class="_j_not_login applyBtn" data-type="1" style="background-color: orange">马上报名</a>
        </div>
        <div class="btn-block">
            <a class="_j_not_login collectionBtn" data-type="1" style="background-color: orange">关注</a>
        </div>
    </div>

    <dl class="user-list _j_care_info" id="userHead">
        <dt>已报名</dt>
        <dd>
            <ul style="width:200px" render-loop="list">
                <li class="_j_set_width"><a render-key="list.id" render-fun="getHref" data-url="/userProfiles.html?id="><img
                        render-src="list.headImgUrl"></a>
                </li>
            </ul>
        </dd>
    </dl>
    <dl class="user-list _j_care_info " id="userHeadCollection">
        <dt>已关注</dt>
        <dd>
            <ul style="width:200px" render-loop="list">
                <li class="_j_set_width"><a render-key="list.id" render-fun="getHref" data-url="/userProfiles.html?id="><img
                        render-src="list.headImgUrl"></a>
                </li>
            </ul>
        </dd>
    </dl>
    <div class="streak"></div>

</section>

</body>
</html>
